import React from 'react';
import { Col, Row, Image, Flex } from 'antd';
import repair1 from '../assets/productImg/repair1.png';
import repair2 from '../assets/productImg/repair2.png';
import repair3 from '../assets/productImg/repair3.png';
import repair4 from '../assets/productImg/repair4.jpg';
import './less/Repair.less';
const Repair = () => (
    <>
        {/* <Row justify={'center'}>
            <Col span={20} className="gutter-box" >
                <Flex vertical={false} justify={'space-between'}>
                    <Image preview={false} width={750} src={repair1} />
                    <Image preview={false} width={650} src={repair4} />
                </Flex>
            </Col>
        </Row> */}

        <Row gutter={[32, 32]} align='stretch' style={{marginBottom:26}}>
            <Col xxl={12} xl={24}>
              {/* <Row align="center">
                <Col>123</Col>
              </Row> */}
                <Row gutter={[32, 32]}  align='center'>
                        <Col xl={16}>
                            <img alt='img'   width='100%' height='500px'  src={repair1} />
                        </Col>
                        <Col xl={16}>
                            <img alt='img' width='100%' height='500px'   src={repair2} />
                        </Col>
                        <Col xl={16}>
                            <img alt='img'  width='100%' height='500px'   src={repair3} />
                        </Col>
                    
                </Row>
            </Col>
            <Col xxl={12} md={0}  align='center'  style={{paddingBottom:'4px'}}>
                <img alt='img' style={{height:'100%'}} src={repair4} />
            </Col>
        </Row>

    </>
);

export default Repair;